<template>
  <view class="booking">
    <!-- 顶部表单 -->
    <view class="main_form">
      <view class="main_form_item">
        <view class="main_form_item_label">
          <text style="color: #f66836">*</text>宝宝姓名<text
            style="color: #979797"
            >（请填写10-20字）</text
          >
        </view>
        <nut-searchbar
          placeholder="请输入宝宝姓名"
          shape="square"
          :clearable="true"
          style="padding: 0"
          input-background="#F8FAFD"
        >
          <template #leftin>
            <img
              style="width: 40rpx; height: 40rpx"
              src="/static/images/my.png"
              alt=""
            />
          </template>
        </nut-searchbar>
      </view>
      <view class="main_form_item">
        <view class="main_form_item_label">
          <text style="color: #f66836">*</text>联系电话
        </view>
        <nut-searchbar
          placeholder="请输入手机号"
          shape="square"
          :clearable="true"
          style="padding: 0"
          input-background="#F8FAFD"
        >
          <template #leftin>
            <img
              style="width: 40rpx; height: 40rpx"
              src="/static/images/phone.png"
              alt=""
            />
          </template>
        </nut-searchbar>
      </view>
      <view class="main_form_item">
        <view class="main_form_item_label">
          <text style="color: #f66836">*</text>选择时间段
        </view>
        <!-- 时间日期选择 -->
        <view class="main_form_time_select">
          <view class="tabs">
            <view
              @click="handleClickTab(index)"
              :class="['tabs_item', currentIndex === index ? 'active' : '']"
              v-for="(item, index) in tabs"
              :key="index"
            >
              <view class="week">{{ item.week }}</view>
              <view class="day">{{ item.day }}</view>
            </view>
          </view>
          <img
            @click="showBottom = true"
            style="width: 40rpx; height: 40rpx"
            src="/static/images/calendar.png"
            alt=""
          />
        </view>
        <!-- 时间段列表 -->
        <view class="main_form_time_list">
          <BookingTime
            v-for="(item, index) in timePeriodList"
            type="timePeriod"
            :item="item"
            :key="index"
            @handleClick="handleSelectTimePeriod(index)"
          />
        </view>
      </view>
    </view>
    <!-- 预约须知 -->
    <view class="booking_tips">
      <view class="booking_tips_title">预约须知</view>
      <view class="booking_tips_content"
        >1、放号时间:每日上午8:00,开放第4天的号源!<br />2、预约名额有限，如果不来的家长请提前取消预约，把机会留
        给真正需要的宝贝!
        <br />3、务必按预约时间准时到达，迟到10分钟的家长视为放弃推
        拿，请预约下一次!
        <br />4、如有退号，系统自动开放号源，家长可刷新捡漏!</view
      >
    </view>
    <!-- 底部操作栏 -->
    <fixed__bottom background="#ffffff">
      <view class="fixed_bottom">
        <view class="fixed_bottom_refresh">
          <img class="img" src="/static/images/refresh.png" alt="" />
          <text>刷新</text>
        </view>
        <nut-button
          plain
          type="info"
          shape="square"
          custom-color="#4c9cea"
          style="width: 284rpx; border-radius: 8rpx"
          @click="handleBlack()"
          >取消</nut-button
        >
        <nut-button
          type="info"
          shape="square"
          style="width: 284rpx; border-radius: 8rpx"
          custom-color="#4c9cea"
          @click="handleClose()"
          >提交预约</nut-button
        >
      </view>
    </fixed__bottom>
    <!-- 底部弹出层 -->
    <nut-popup
      position="bottom"
      :custom-style="{ minHeight: '30%' }"
      v-model:visible="showBottom"
    >
      <view class="bottom_pop">
        <view class="bottom_pop_head">
          <view class="bottom_pop_head_title">更多预约日期</view>
          <nut-icon
            @click="showBottom = false"
            name="close"
            size="32rpx"
          ></nut-icon>
        </view>
        <!-- 时间段列表 -->
        <view class="bottom_pop_time_list">
          <BookingTime
            v-for="(item, index) in dateList"
            type="date"
            :key="index"
            :item="item"
            @handleClick="handleSelectDate(index)"
          />
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script>
import Modal from "@/utils/Modal";
import BookingTime from "./components/booking_time.vue";

export default {
  components: {
    BookingTime,
  },
  data() {
    return {
      showBottom: false, //底部弹出框开关
      tabs: [
        { week: "周一", day: "1/11" },
        { week: "周二", day: "1/12" },
        { week: "周三", day: "1/13" },
        { week: "周四", day: "1/14" },
        { week: "周五", day: "1/15" },
        { week: "周六", day: "1/16" },
        { week: "周七", day: "1/17" },
      ], // 标签内容
      timePeriodList: [
        {
          timePeriod: "09:00-10:00",
          isActive: true,
        },
        {
          timePeriod: "09:00-10:00",
          isActive: false,
        },
        {
          timePeriod: "09:00-10:00",
          isActive: false,
        },
        {
          timePeriod: "09:00-10:00",
          isActive: false,
        },
        {
          timePeriod: "09:00-10:00",
          isActive: false,
        },

        {
          timePeriod: "09:00-10:00",
          isActive: false,
        },
      ], // 时间段
      dateList: [
        {
          date: "周一",
          isActive: true,
        },
        {
          date: "周二",
          isActive: false,
        },
        {
          date: "周三",
          isActive: false,
        },
        {
          date: "周四",
          isActive: false,
        },
        {
          date: "周五",
          isActive: false,
        },

        {
          date: "周六",
          isActive: false,
        },
      ], // 日期
      currentIndex: 0, // 当前选中的索引
    };
  },
  methods: {
    /** 取消预约 */
    handleClose() {
      Modal.confirm("是否取消预约").then((res) => {
        console.log(res);
      });
    },
    /** 返回 */
    handleBlack() {
      uni.navigateBack();
    },
    //点击标签
    handleClickTab(index) {
      this.currentIndex = index;
    },
    //点击选择时间段
    handleSelectTimePeriod(index) {
      this.timePeriodList.forEach((element) => {
        element.isActive = false;
      });
      this.timePeriodList[index].isActive = true;
    },
    //点击选择日期
    handleSelectDate(index) {
      this.dateList.forEach((element) => {
        element.isActive = false;
      });
      this.dateList[index].isActive = true;
    },
  },
};
</script>

<style>
page {
  background: #f8fafd;
}
</style>

<style lang="scss" scoped>
.booking {
  --nut-searchbar-input-height: 44px;
  padding: 32rpx;
  padding-bottom: 160rpx;
  overflow-y: scroll;
  .main_form {
    padding: 22rpx 20rpx 40rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 1px 7px 0 rgb(237, 238, 241);
    .main_form_item {
      margin-bottom: 40rpx;
      .main_form_item_label {
        height: 44rpx;
        font-weight: 600;
        font-size: 32rpx;
        line-height: 38rpx;
        margin-bottom: 22rpx;
      }
      .main_form_time_select {
        margin-bottom: 20rpx;
        border-bottom: 2rpx solid #f8fafd;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tabs {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          overflow-x: scroll;
          height: 100rpx;
          .tabs_item {
            width: 60rpx;
            height: 100rpx;
            flex-shrink: 0;
            margin-right: 42rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #7b7b7b;
            position: relative;

            .week {
              font-size: 28rpx;
              line-height: 33rpx;
            }
            .day {
              font-size: 24rpx;
              line-height: 28rpx;
            }
          }
          //   .tabs_item::after {
          //     content: "";
          //     position: absolute;
          //     bottom: 0;
          //     width: 60rpx;
          //     height: 2rpx;
          //     background: #4c9cea;
          //   }
          .active {
            background: rgba(76, 156, 234, 0.1);
            color: #4c9cea;
            ::before {
              content: "";
              position: absolute;
              bottom: 0rpx;
              width: 60rpx;
              height: 2rpx;
              background: #4c9cea;
            }
          }
        }
      }
      .main_form_time_list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      :deep(.uni-input-placeholder) {
        color: #979797;
        margin-left: 16rpx;
      }
      :deep(.uni-input-input) {
        height: 88rpx;
      }
    }
  }
  .booking_tips {
    margin-top: 30rpx;
    .booking_tips_title {
      height: 44rpx;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 38rpx;
      margin-bottom: 30rpx;
    }
    .booking_tips_content {
      font-size: 28rpx;
      color: #7b7b7b;
      line-height: 40rpx;
    }
  }
  .fixed_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 22rpx 0 40rpx;
    .fixed_bottom_refresh {
      display: flex;
      align-items: center;
      flex-direction: column;
      .img {
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 14rpx;
      }
      font-size: 24rpx;
      color: #7b7b7b;
      line-height: 23rpx;
    }
  }
  .bottom_pop {
    padding: 28rpx 32rpx 50rpx;
    .bottom_pop_head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 32rpx;
      color: #181818;
      line-height: 38rpx;
    }
    .bottom_pop_time_list {
      margin-top: 40rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}
</style>
